<template>
  <div>
    <el-card class="card1">
      <el-form :model="form" :inline="true" size="small">
        <el-form-item label="使用单位" label-width="100px">
          <el-input v-model="form.useOrgName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备注册代码" label-width="100px">
          <el-input v-model="form.eleCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="救援编号" label-width="100px">
          <el-input v-model="form.num963333" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:30px">
          <el-button type="primary" @click="gettableData" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="card3">
      <div slot="header" class="clearfix">
        公共电梯池
        <el-button style="float: right" @click="eleRenbao" type="danger" size="small">认保</el-button>
      </div>
      <div class="text">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="设备注册代码" prop="eleCode">
            <!-- <template slot-scope="scope">
              <el-button type='text' @click="infoClick(scope.row.eleCode)">
                {{scope.row.eleCode}}
              </el-button>
            </template> -->
          </el-table-column>
          <el-table-column prop="maintOrgName" label="维保单位名称" width="200">
          </el-table-column>
          <el-table-column prop="eleStatus" label="设备状态">
          </el-table-column>
          <el-table-column prop="num963333" label="救援编号">
          </el-table-column>
          <el-table-column prop="useOrgName" label="使用单位" width="200">
          </el-table-column>
          <el-table-column prop="eleUseCommunity" label="设备安装地址" width="200">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
          :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="是否确认申诉电梯" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" :inline="true" size="small">
        <el-form-item label="申诉文件上传" label-width="100px">
          <el-upload class="upload-demo" action="#" :auto-upload="false" :limit="1" :on-remove="handleRemove" :on-change="beforeUpload" :file-list="fileList"
            :on-exceed="handleExceed">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getShensu">确 定</el-button>
      </span>
    </el-dialog>
    <LeftDetails ref="LeftDetails" />
  </div>
</template>

<script>
import util from '@/libs/util'
import { getpublicEleList, getdoUnderwriting, getdoEleAppeal } from '@/api/elevator'
import LeftDetails from './components/leftdetails.vue'
import { getUploadFile } from '@/api/public'
export default {
  components: {
    LeftDetails
  },
  data () {
    return {
      dialogVisible: false,
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      form: {

      },
      fileList: [],
      filePath: '',
      formLabelWidth: '100px',
      multipleSelection: []
    }
  },
  mounted () {
    this.gettableData()
  },
  methods: {
    handleExceed (files, fileList) {
      this.$message.warning('当前限制选择1个文件')
    },
    // 上传文件
    beforeUpload (file, fileList) {
      console.log(file)
      if (file.type != "" || file.type != null || file.type != undefined) {
        const isLt5M = file.size / 1024 / 1024 < 5 //这里做文件大小限制
        if (!isLt5M) {
          this.$message('上传文件大小不能超过 5MB!')
          return false
        }
        let formData = new FormData()
        formData.append('file', file.raw)
        formData.append('bucketName', 'other')
        getUploadFile(formData).then(res => {
          if (res.data.code == '200') {
            this.filePath = res.data.data.id,
              this.fileList = fileList
          }
        })
      }
    },
    handleRemove () {
      this.fileList = [],
        this.filePath = ''
    },
    getShensu () {
      console.log(888)
      let query = this.multipleSelection.map((item) => {
        return item.eleCode
      })
      const params = {
        eleCodes: query,
        filePath: this.filePath
      }
      getdoEleAppeal(params).then(res => {
        if (res.data.code == '200') {
          this.dialogVisible = false
          this.gettableData()
          this.$message({
            type: 'success',
            message: '申诉成功!'
          })
        } else {
          this.$message({
            type: 'warning',
            message: res.data.msg
          })
        }
      })
    },
    // 获取公共电梯池数据
    gettableData () {
      const query = {
        eleCode: this.form.eleCode,
        num96333: this.form.num96333,
        useOrgName: this.form.useOrgName,
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      }
      getpublicEleList(query).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list
          this.pagination.pageTotal = res.data.data.total
        }
      })
    },
    // 电梯认保
    eleRenbao () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认认保电梯?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.eleCode
          })
          const params = {
            eleCodeList: query
          }
          getdoUnderwriting(params).then(res => {
            if (res.data.code == '200') {
              this.gettableData()
              this.$message({
                type: 'success',
                message: '认保成功!'
              })
            } else {
              this.fileList = [],
                this.filePath = ''
              this.dialogVisible = true
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消认脱'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    },
    infoClick (eleCode) {
      this.$refs.LeftDetails.dialogVisible1 = true
      this.$refs.LeftDetails.eleCode = eleCode
      this.$refs.LeftDetails.getPageData()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableData()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableData()
    },
  }
}

</script>
<style lang="less" scoped>
.el-pagination {
  margin-top: 5px;
  text-align: right;
}

.card1 {
  ::v-deep .el-input__inner {
    width: 180px;
  }
  ::v-deep .el-form-item__label {
    font-weight: 800;
  }
}
.clearfix {
  font-weight: 800;
}

.card3 {
  margin-top: 15px;
  .text {
    ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
      z-index: 2;
    }
    ::v-deep .el-table__fixed::before {
      height: 0px;
    }
  }
}
</style>
